<template>
  <div class="message-selector">
    <div class="w-full text-center py-4 font-bold">消息中心</div>
    <n-menu :options="msgMenuOptions" @update:value="handleMenuChange" />
  </div>
</template>

<script setup>
const router = useRouter()
const handleMenuChange = (_, item) => {
  router.push(item.href)
}
const msgMenuOptions = [
  {
    label: () => '我的消息',
    key: 'message',
    href: '/message/chat/0'
  },
  // {
  //   label: () => '@我的',
  //   key: '@',
  //   href: '/message/at'
  // },
  {
    label: () => '系统通知',
    key: 'notice',
    href: '/message/notice'
  },
  {
    label: () => '回复我的',
    key: 'reply',
    href: '/message/reply'
  }
]
</script>

<style scoped lang="scss">
.message-selector {
  background-color: rgba(255, 255, 255, 0.8);
  width: 120px;
  flex-shrink: 0;
}
:deep(.n-menu) .n-menu-item-content .n-menu-item-content-header {
  color: rgb(32, 32, 32);
}
</style>
